//
// Created by Dong on 2022/4/4.
//

import SwiftUI

struct UseText: View {
    @State private var inputText: String = ""
    @State private var username: String = ""
    @State private var password: String = ""
    @State private var intro: String = ""
    @State private var isHideInput:Bool = true
    @FocusState private var textFiledFocused: Bool
    var body: some View {
        VStack {
            Group {
                // 文本（单行|多行只读文本）
                Text("Text")
                    .padding() // 设置边距
                    .background(Color(.gray)) // 设置背景
                    .foregroundColor(.white) // 设置颜色
                    .cornerRadius(10) // 设置边角

                // 标签（文本&图标）
                Label("Label", systemImage: "command")
                Label("Label", systemImage: "command")
                    .labelStyle(.iconOnly) // 仅显示图标
                Label("Label", systemImage: "command")
                    .labelStyle(.titleOnly) // 仅显示标题
            }

            Group {
                // 文本输入（单行）
                // 通过$绑定属性
                Text("inputText : \(inputText)")
                Text("textFiledFocused : \(String(textFiledFocused))")
                TextField("TextField", text: $inputText)
                    .onSubmit {
                        print("TextFiled Submit")
                    } // 提交事件
                    .border(.secondary) // 边框样式
                    .padding()
                // 表单
                Form {
                    TextField(text: $username, prompt: Text("Required")) {
                        Text("Username")
                    }

                    // 安全文本输入
                    SecureField(text: $password, prompt: Text("Required")) {
                        Text("Password")
                    }

                    // 多行文本
                    TextEditor(text: $intro)
                        .lineSpacing(10) // 设置行距
                }
                .frame(height: 300)

                // 带清空、图标的输入框
                ZStack {
                    HStack {
                        if isHideInput {
                            TextField("keys...", text: $inputText)
                                .padding(.leading,25)
                        }else{
                            SecureField("keys...", text: $inputText)
                                .padding(.leading,25)
                        }
                        
                    }
                    HStack{
                        // 查找图标
                        Image(systemName: "magnifyingglass")
                            .padding(.leading,5)
                        
                        Spacer()
                        
                        // 隐藏按钮
                        Button {
                            isHideInput.toggle()
                        } label: {
                            if isHideInput {
                                Image(systemName: "eye")
                            }else{
                                Image(systemName: "eye.slash.fill")
                            }
                        }
                        
                        // 清空按钮
                        Button {
                            inputText = ""
                        } label: {
                            Image(systemName: "xmark.circle")
                                .foregroundColor(.black)
                                .padding(.trailing,5)
                        }

                    }
                }
                .frame(height: 35, alignment: .center)
                .border(.gray, width: 3)
                .cornerRadius(5)
                .padding()
            }
        }
    }
}

struct UseText_Previews: PreviewProvider {
    static var previews: some View {
        UseText()
    }
}
